<template>
<view class="tabBAR">
	<view class="tab_bar">
		<block v-for="(item,index) in tabList" :key="index">
			<view class="navigator" :class="currentTabIndex == index ? 'on' : ''" @tap="switchTab(index)">
				<view class="icon">
					<image :src="item.icon"  class="iconfont"></image>
					<!-- <text v-if="item.badge" class="uni_badge">{{item.badge}}</text> -->
					<!-- <text v-if="item.badgeDot" class="uni_badge uni_badge_dot"></text> -->
				</view>
				<view class="text" :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]">{{item.txt}}</view>
			</view>
		</block>   
	</view>
</view>
</template>
	<!-- :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]" -->
<script>
	export default {
		data() {
			return {
				tabList: [{
						icon: '../../static/image/tabBar1.png',
						txt:'首页',
						// badge: 1
					},
					// {
					// 	icon: '../../static/image/tabBar2.png',
					// 	txt: '选课',
					// 	// badgeDot: true
					// },
					{
						icon: '../../static/image/tabBar3.png',
						txt: '我的',
						// badgeDot: true
					},
				],
				currentTabIndex: this.current
			}
		},
		props: {
			current: {
				type: [Number, String],
				default: 0
			},
			backgroundColor: {
				type: String,
				default: '#fbfbfb'
			},
			color: {
				type: String,
				default: '#999'
			},
			tintColor: {
				type: String,
				default: '#42b983'
			}
		},
		methods: {
			switchTab(index) {
				this.currentTabIndex = index;
			if(index === 0) {
			this.tabList[0].icon = '../../static/image/tabBar1-1.png';
		     uni.redirectTo({
		     	url:'../../pages/index/index'
		     })
			} else if (index === 1) {
				// this.tabList[1].icon = '../../static/image/tabBar2-1.png';
				// uni.redirectTo({
				// 	url:'../../pages/xuanke/xuanke'
				// })
			} else if (index === 2) {
				this.tabList[2].icon = '../../static/image/tabBar3-1.png';
				uni.redirectTo({
					url:'../../pages/my/my'
				})
			}
				this.$emit('click', index);
			}
		}
	}
</script>
<style>
	.tab_bar {padding-bottom: 7rpx;padding-top:10rpx;border-top: 1rpx #C0C0C0 solid;
	position: fixed;
	bottom: 0;
	background: #fff;
	z-index: 9999;
	width:100%;
	}
	.iconfont {
		width: 44rpx;
		height: 45rpx;
	}
	.text {
      font-size: 19rpx;text-align: center;padding-top:3rpx;
	}
	.tab_bar {
		display: flex;
		justify-content: space-around;
	}
	.icon {text-align: center;}
	.tabBAR {
		padding-top:80rpx;
	}
</style>
